<template>
  <div>
    <div v-if="yh" v-text="val" @click="yhClick" class="bx oh h24px" />
    <el-select
      v-else
      v-model="val"
      :disabled="disabled"
      :filterable="true"
      :default-first-option="true"
      allow-create
      placeholder="请选择或输入 工序"
      clearable
      @change="$emit('change',$event)"
    >
      <el-option v-for="item in mList" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
  </div>
</template>
<script>
// import name from "./name";
export default {
  // components: { name},
  props: {
    disabled: { default: false },
    value: { type: [String, Number], default: "" },
    list: { default: false }
  },
  watch: {
    value(a) {
      this.val = a ? this.$gd.process.getItem({ id: a }).name : undefined;
      this.yh = true;
    },
    list(a) {
      this.setTree();
    },
    yh(a) {
      if (!a && this.value) {
        this.val = this.value;
      }
      this.mList = this.list ? this.list : this.$gd.process;
    },
    disabled(a) {
      if (a) {
        this.val = "";
        this.yh = true;
        this.$emit("change", 0);
      }
    }
  },
  data() {
    return {
      mList: [],
      tree: this.$gd.process,
      val: "",
      yh: true
    };
  },
  // computed() {return{}},
  created() {
    // console.log(this.value);
    if (this.value) {
      this.val = this.$gd.process.getItem({ id: this.value }).name;
      // this.mList = [this.$gd.process.getItem({ id: this.val })];
    } else this.val = "";
    // this.$emit("change", this.val);
  },
  methods: {
    setTree() {
      if (this.list) this.mList = this.list;
    },
    yhClick() {
      if (this.disabled) return;
      this.yh = false;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
